<template>
  <div class="card_container">
    <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
      <template #content>
        <span>{{ t('club_page_wdpj') }}</span>
      </template>
      <template #left>
        <img src="/imgs/club/arrow_left.png" alt="" @click="router.go(-1)" class="arrow_left" />
      </template>
      <template #right>
        <!-- <span @click="onSubmitCreate" class="save">保存</span> -->
      </template>
    </nut-navbar>
    <nut-tabs @change="tabChange" v-model="state.agentId" title-scroll title-gutter="10" v-if="gameTabList">
      <nut-tab-pane :title="item.name" :pane-key="item.id" v-for="item in gameTabList" :key="item.id">
        <!-- 轮播 -->
        <!-- <nut-swiper
          :init-page="0"
          :auto-play="3000"
          pagination-visible
          pagination-color="#426543"
          pagination-unselected-color="#808080"
          style="height: 124px"
        >
          <nut-swiper-item v-for="(item, index) in list" :key="index">
            <img :src="item" alt="" class="imgs" draggable="false" />
          </nut-swiper-item>
        </nut-swiper> -->
        <div class="list_con" :style="contentStyle()">
          <nut-infinite-loading v-model="infinityValue" load-more-txt=" "
            :has-more="hasMore" @load-more="onLoad">
            <nut-empty v-if="gamblingList.length == 0" :description="t('nomore_data')"></nut-empty>
            <GmablingCard v-else :gameType="state.agentId" :gamblingList="gamblingList" />
          </nut-infinite-loading>
        </div>
        
      </nut-tab-pane>
    </nut-tabs>
    <!-- <LevitateBox
      @checkGame="onGameClick"
      @miniClick="onSwitchGameClick"
    /> -->
  </div>
</template>

<script lang="ts" setup>
// @ts-nocheck
import { ref, reactive, onMounted } from 'vue';
import GmablingCard from "@/components/gamblingCard.vue";
// import LevitateBox from '../components/levitateBox.vue';

import { storeToRefs } from "pinia";
import pinia from "@/store/index";
import { User } from "@/store/user";
const { appHeight } = storeToRefs(User(pinia));

import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";

import {  useRouter } from "vue-router";
const router = useRouter();

import { useI18n } from "vue-i18n";
const { t } = useI18n();

const state = ref({
  // 0为推荐
  agentId: 0,
})

const params: any = reactive({
  // 参数
  pageSize: 10,
  page: 1,
});

// const list = ref([
//   'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
//   'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
//   'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
//   'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
// ])

const gameTabList = ref([
  {
    id: 0,
    name: t('club_page_tj'),
  },
  {
    id: 49,
    name: t('club_page_49'),
  },
  {
    id: 47,
    name: t('club_page_47'),
  },
  
]);

const infinityValue = ref(false);
const hasMore = ref(true);

// 牌局列表
const gamblingList = ref<any>([]);

const tabChange = (item: any) => {
  params.page = 1;
  infinityValue.value = false;
  hasMore.value = true;
  gamblingList.value = []
  state.value.agentId = item.paneKey
  getFilterDesk()
}

const contentStyle = () => {
  return window.matchMedia("(display-mode: standalone)").matches ||
    window.navigator.standalone
    ? { height: `calc(${appHeight.value}px - 40px)` }
    : { height: `calc(${appHeight.value}px - 40px)` };
};

// 我的牌局列表
const getFilterDesk = () => {
  infinityValue.value = true;
  const req = NetPacket.req_get_joined_dest_list();
  req.game_type = Number(state.value.agentId)
  req.page = 1;
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_get_joined_dest_list",
    callback: getFilterDeskHandle,
  });
}
// 我的牌局列表返回
const getFilterDeskHandle = (res: any) => {
  if (res.desk_list.length < params.pageSize) {
    hasMore.value = false;
  } else {
    hasMore.value = true;
  }
  gamblingList.value = [...gamblingList.value, ...res.desk_list];
  infinityValue.value = false; 
};

const onLoad = () => {
  if (hasMore.value) {
    params.page++;
    getFilterDesk();
  } else {
    console.log('没有更多数据了');
  }
};


onMounted(async () => {
  await getFilterDesk();
});
</script>

<style scoped lang="scss">
.card_container {
  
  .arrow_left {
    width: 24px;
    height: 24px;
  }
  
  .imgs{
    height: 124px;
    width: 347px;
    
  }
  :deep(.nut-swiper) {
    width: 347px;
    border-radius: 8px;
    margin: 0 auto 10px;
  }

  :deep(.nut-tabs__titles) {
    height: 36px;
  }

  .list_con {
    width: 347px;
    margin: 0 auto;
    overflow: auto;
  }
}

</style>